<template>
  <!-- 害虫管理 -->
  <BaseMainSlot>
    <template v-slot:searchbox>
      <div class="label-input mr-20">
        <div class="label">单位名称:</div>
        <div class="input">
          <el-input v-model="pestName" clearable />
        </div>
      </div>
      <div class="search ml-20">
        <img src="~@/assets/action-bar-icon/search.png" @click="getTableDataList()" />
      </div>
    </template>
    <template v-slot:zhactbar>
      <ActionBar
        :add-active="addActive"
        :del-active="delActive"
        :edit-active="editActive"
        :cancel-active="cancelActive"
        :save-active="saveActive"
        @add="add"
        @cancel="cancel"
        @edit="edit"
        @del="del"
        @save="save"
      />
    </template>
    <template v-slot:content>
      <el-table
        v-loading="loading"
        highlight-current-row
        :data="tableData"
        stripe
        border
        height="calc(100% - 50px)"
        @row-click="handleEdit"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="pestName" label="虫子名称" />
        <el-table-column prop="harm" label="是否为害虫">
          <template slot-scope="scope">
            <div>
              <div v-if="scope.row.harm === true" style="color:#f56c6c;">是</div>
              <div v-if="scope.row.harm === false" style="color:#5cb87a;">否</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="查看图片">
          <template slot-scope="scope">
            <el-button v-if="scope.row.pestName" type="success" @click="showimgmet(scope.row)">查看图片</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
      <el-dialog title="添加害虫" :visible.sync="isaddshowdiaview" width="40%">
        <div class="zh-dialog-content">
          <div class="line-type1">
            <div class="line-type1-name">害虫名称</div>
            <div class="line-type1-value">
              <el-select v-model="formData.pestindex">
                <el-option
                  v-for="(pestitem,pestindex) in pestList"
                  :key="pestindex"
                  :value="pestindex"
                  :label="pestitem"
                />
              </el-select>
            </div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">害虫图片</div>
            <div class="line-type1-value">
              <imgselect @child-event="setimaeurl" />
            </div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">是否为{{ farmingTypeTitles }}</div>
            <div class="line-type1-value">
              <el-radio v-model="formData.harm" label="true">是</el-radio>
              <el-radio v-model="formData.harm" label="false">否</el-radio>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" type="success" @click="isaddshowdiaview = false">取消</el-button>
          <el-button class="zh-button-two" type="primary" @click="save()">确认</el-button>
        </span>
      </el-dialog>
      <!-- 展示图片 -->
      <el-dialog title="虫子图片" :visible.sync="isshowimg" width="30%">
        <img :src="nowimgurl" width="100%" height="auto" />
      </el-dialog>
      <!-- 修改图片 -->
      <el-dialog title="修改害虫" :visible.sync="iseditshowdiaview" width="40%">
        <div class="zh-dialog-content">
          <div class="line-type2">
            <div class="line-type2-name">害虫名称</div>
            <div class="line-type2-value">{{ formData.pestName }}</div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">害虫图片</div>
            <div class="line-type1-value">
              <imgselect @child-event="setimaeurl" />
            </div>
          </div>
          <div class="line-type1">
            <div class="line-type1-name">是否为{{ farmingTypeTitles }}</div>
            <div class="line-type1-value">
              <el-radio v-model="formData.harm" label="true">是</el-radio>
              <el-radio v-model="formData.harm" label="false">否</el-radio>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" type="success" @click="iseditshowdiaview = false">取消</el-button>
          <el-button class="zh-button-two" type="primary" @click="save()">确认</el-button>
        </span>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>
<script>
import imgselect from "@/components/uploadimage/uploadimage.vue";
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination/index.vue";
import nowpagereq from "@/api/basic-info-manage/new-pest-manage/index";
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
import { mymixin } from "@/utils/mixin";
import { farmingTypeTitle } from "@/utils/validate";

import { getToken } from "@/utils/auth";
export default {
  name: "NewPestManage",
  components: { ActionBar, Pagination, BaseMainSlot, imgselect },
  mixins: [mymixin],
  data() {
    return {
      pestName: "",
      nowimgurl: "",
      isshowimg: false,
      iseditshowdiaview: false,
      farmingTypeTitles: farmingTypeTitle(),
      // 可选择病虫害数组
      pestList: [
        // {pestName:'',pestId:''}
      ],
      // 是否展示弹窗
      isaddshowdiaview: false,
      selectidlist: []
    };
  },
  watch: {
    nowChanceStau(newval) {
      // 当状态为删除的时候触发删除方法---另外的删除修改添加，通过点击保存，调用方法来实现
      if (newval === "add") {
        this.isaddshowdiaview = true;
      }
      if (newval === "edit") {
        this.iseditshowdiaview = true;
      }
    }
  },
  created() {
    // 获取表格数据
    this.getTableDataList();
  },
  mounted() {
    this.getallpestmet();
  },
  methods: {
    getTableDataList() {
      this.loading = true;
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        pestName: this.pestName
      };
      nowpagereq.getpestList(params).then(res => {
        if (res.code === 1) {
          this.loading = false;
          let list = res.data;
          this.tableData = list.content;
          this.totalSize = list.totalElements;
          this.addblankmet();
        } else {
          this.$message.error("获取表格失败");
        }
      });
    },
    // 设置添加图片的地址
    setimaeurl(e) {
      this.formData.pestPicture = e;
    },
    // 获取可选择你的虫子
    async getallpestmet() {
      let { data: list } = await nowpagereq.getallpestnamelist();
      this.pestList = list;
    },
    delmessage() {
      nowpagereq.delnewpestmessage(this.selectidlist).then(res => {
        if (res.code === 1) {
          this.getTableDataList();
          this.$message.success("删除成功!");
        } else {
          this.$message.error("删除失败!");
        }
      });
    },
    save() {
      if (this.nowChanceStau === "add") {
        let params = {
          pestName: this.pestList[this.formData.pestindex],
          pestPicture: this.formData.pestPicture,
          organizationNo: getToken("organizationNo"),
          harm: this.formData.harm
        };
        nowpagereq.addnewpestmessage(params).then(res => {
          if (res.code === 1) {
            this.formData = {};
            this.$message.success("添加成功");
            this.isaddshowdiaview = false;
            this.getTableDataList();
          } else {
            this.$message.warning("添加失败");
          }
        });
      }
      // 修改
      if (this.nowChanceStau === "edit") {
        let params = {
          pestId: this.formData.pestId,
          harm: this.formData.harm
        };
        if (this.formData.pestPicture && this.formData.pestPicture.length > 0) {
          params.pestPicture = this.formData.pestPicture;
        }
        nowpagereq.editnewpestmessage(params).then(res => {
          if (res.code === 1) {
            this.$message.success("修改成功");
            this.iseditshowdiaview = false;
            this.getTableDataList();
          } else {
            this.$message.warning("修改失败");
          }
        });
      }
    },
    // 表格选择
    handleSelectionChange(list) {
      // console.log(list)
      this.selectidlist = [];
      let notvalue = true;
      this.selectidlist = list.map(item => {
        if (item.pestId) {
          return item.pestId;
        } else {
          notvalue = false;
          return "";
        }
      });
      if (!notvalue) {
        this.delActive = false;
        this.$message.warning("请不要选择空行!");
      } else {
        this.delActive = true;
      }
    },
    // 表格选中
    handleEdit(row) {
      if (row.pestId) {
        this.formData = row;
        this.editActive = true;
        this.saveActive = false;
        this.cancelActive = true;
        this.canInput = false;
      }
    },
    // 展示图片
    showimgmet(e) {
      if (e.pestPicture && e.pestPicture.length) {
        this.nowimgurl = "data:image/png;base64," + e.pestPicture;
        this.isshowimg = true;
      } else {
        this.$message.warning("此虫暂无图片");
      }
    },
    // 页数与页码选择
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    }
  }
};
</script>
<style lang="scss" scoped>
.zh-dialog-content {
  width: 100%;
  .line-type1 {
    width: 96%;
    margin-left: 2%;
    min-height: 40px;
    // background-color: rgb(240, 26, 26);
    display: flex;
    flex-direction: row;
    // justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-bottom: 5px;
    .line-type1-name {
      width: 120px;
      text-align: right;
      white-space: nowrap;
      height: 40px;
      line-height: 40px;
    }
    .line-type1-value {
      width: calc(100% - 130px);
      margin-left: 10px;
      white-space: nowrap;
      // background-color: chartreuse;
      min-height: 40px;
      line-height: 40px;
      color: #0fa00f;
      ::v-deep .el-select {
        width: 100%;
        // background-color: chocolate;
      }
    }
  }
  .line-type2 {
    width: 96%;
    margin-left: 2%;
    height: 40px;
    // background-color: rgb(240, 26, 26);
    display: flex;
    flex-direction: row;
    // justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-bottom: 5px;
    .line-type2-name {
      width: 120px;
      text-align: right;
      white-space: nowrap;
      height: 40px;
      line-height: 40px;
    }
    .line-type2-value {
      width: calc(100% - 130px);
      margin-left: 10px;
      white-space: nowrap;
      // background-color: chartreuse;
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
